<template>
	<view class="page_view">
		<view class="title">
			{{articleDetails.title}}
		</view>
		<image :src="ImgUrl + articleDetails.img" class="fengmian" mode=""></image>
		<view class="desc">
			<rich-text class="list_item_min_left" :nodes="articleDetails.content"></rich-text>
		</view>
		<view class="time">
			发布于 {{articleDetails.created_at}} · 著作权归作者所有
		</view>
		<view class="shera flex1">
			<button style="padding: unset;margin: unset;line-height: unset;font-size: unset;border: unset;"
				open-type="share" :plain="true" hover-class="none">
				<view class="shera_item flex1">
					<image src="https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/wx_2.png"
						class="shera_item_img" mode=""></image>
					<view class="shera_item_text">
						微信
					</view>
				</view>
			</button>
			<view @click="shareLine" class="shera_item flex1">
				<image src="https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/pyq.png" class="shera_item_img"
					mode=""></image>
				<view class="shera_item_text">
					微信
				</view>
			</view>
		</view>
		<view class="pl_view">
			<view class="pl_title">
				评论（{{articleDetails.comment?articleDetails.comment.length: 0}}）
			</view>
			<view class="pl_list">
				<view class="" v-for="(item,index) in articleDetails.comment" :key="index">
					<view @click="changePid(item.menu.id,item.menu.user.name)" class="pl_list_item">
						<image :src="ImgUrl + item.menu.user.avatar" class="pl_list_item_img" mode=""></image>
						<view class="pl_list_item_right">
							<view class="pl_name">
								{{item.menu.user.name}}
							</view>
							<view class="pl_content">
								{{item.menu.content}}
							</view>
							<view class="zan flex">
								<view class="zan_left">
									{{item.menu.created_at.split(' ')[0].split('-')[1]+'-'+item.menu.created_at.split(' ')[0].split('-')[2]}}
								</view>
								<view class="zan_right flex1" @click.stop="likeComment(item.menu.id)">
									<image v-if="item.menu.is_liked==1"
										src="https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/zan2.png"
										class="zan_icon" mode=""></image>
									<image v-else
										src="https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/zan.png"
										class="zan_icon" mode=""></image>
									<view class="">
										{{item.menu.like}}
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="pl_list_itemer" v-for="(items,inde) in item.nodes" :key="inde">
						<image v-if="" :src="ImgUrl+items.menu.user.avatar" class="pl_list_item_img" mode=""></image>
						<view class="pl_list_item_right">
							<view class="pl_name">
								{{items.menu.user.name}}
							</view>
							<view class="pl_content">
								{{items.menu.content}}
							</view>
							<view class="zan flex">
								<view class="zan_left">
									{{item.menu.created_at.split(' ')[0].split('-')[1]+'-'+item.menu.created_at.split(' ')[0].split('-')[2]}}
								</view>
								<view class="zan_right flex1" @click.stop="likeComment(items.menu.id)">
									<image v-if="items.menu.is_liked==1"
										src="https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/zan2.png"
										class="zan_icon" mode=""></image>
									<image v-else
										src="https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/zan.png"
										class="zan_icon" mode=""></image>
									<view class="">
										{{items.menu.like}}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 占位置 -->
		<view class="" style="height: 140rpx;">

		</view>
		<view v-if="parent_id==0" class="xiepinglun">
			<view class="xiepinglun_inputs">
				<!-- <u--input type="text" placeholder="写评论..." @confirm="submit" class="xiepinglun_input" v-model="ping" placeholder-style="color:#999;"/> -->
				<input type="text" :cursor-spacing="8" v-model="ping" @confirm="submit" confirm-type="send"
					placeholder="写评论...">
			</view>
			<view class="xiepinglun_icon" style="margin-left: 20rpx;">
				<image src="https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/pinglun.png"
					class="xiepinglun_icon_img" mode=""></image>
				<view class="xiepinglun_icon_num">
					{{articleDetails.comment_quantity}}
				</view>
			</view>
			<view class="xiepinglun_icon" @click="zan(id)">
				<image v-if="articleDetails.liked==1"
					src="https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/zan2.png" class="xiepinglun_icon_img"
					mode=""></image>
				<image v-else src="https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/zan.png"
					class="xiepinglun_icon_img" mode=""></image>
				<view class="xiepinglun_icon_num">
					{{articleDetails.like_quantity}}
				</view>
			</view>
		</view>
		<view v-if="parent_id!=0" class="xiepinglun" style="position: unset;">
			<view class="xiepinglun_inputs">
				<!-- <u--input type="text" placeholder="写评论..." @confirm="submit" class="xiepinglun_input" v-model="ping" placeholder-style="color:#999;"/> -->
				<input type="text" :cursor-spacing="8" :focus="parent_id!=0" v-model="ping" @confirm="submit"
					confirm-type="send" :placeholder="'@'+parent_name+':'">
			</view>
			<view class="xiepinglun_icon" style="margin-left: 20rpx;">
				<image src="https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/pinglun.png"
					class="xiepinglun_icon_img" mode=""></image>
				<view class="xiepinglun_icon_num">
					{{articleDetails.comment_quantity}}
				</view>
			</view>
			<view class="xiepinglun_icon" @click="zan(id)">
				<image v-if="articleDetails.liked==1"
					src="https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/zan2.png" class="xiepinglun_icon_img"
					mode=""></image>
				<image v-else src="https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/zan.png"
					class="xiepinglun_icon_img" mode=""></image>
				<view class="xiepinglun_icon_num">
					{{articleDetails.like_quantity}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		articleDetail,
		articleLike,
		like_comment,
		articleComment
	} from '../../api/login.js';
	export default {
		data() {
			return {
				ping: '',
				id: '',
				articleDetails: {},
				parent_id: 0,
				parent_name: '',
			}
		},
		onLoad(option) {
			this.id = option.id;
			this.getDetail(option.id);
		},
		computed: {
			ImgUrl() {
				console.log(this.$store.state.ImgUrl)
				return this.$store.state.ImgUrl
			},
		},
		onShareAppMessage(res) {
			// if (res.from === 'button') {
			// 	// 来自页面内分享按钮
			// 	console.log(res.target);
			// }
			return {
				title: this.articleDetails.title, //分享的名称
				path: '/pages/PopularScienceDetail/PopularScienceDetail?id=' + this.id, //分享详情页面时，需要把所需参数代入
				// mpId: 'xxxx', //此处配置微信小程序的AppId
			};
		},
		onShareTimeline(res) {
			return {
				title: this.articleDetails.title,
				type: 0,
				summary: '',
			};
		},
		methods: {
			shareLine() {
				uni.showToast({
					title: '请点击右上角三个点！',
					icon:'none'
				})
			},
			changePid(id, name) {
				this.parent_id = id;
				this.parent_name = name;
			},
			submit() {
				let params = {
					content: this.ping,
					id: this.id,
					parent_id: this.parent_id
				}
				articleComment(params).then((res) => {
					if (res.code == 200001) {
						this.parent_id = 0;
						this.parent_name = '';
						uni.showToast({
							title: '评论成功',
							icon: 'none'
						});
						this.ping = '';
						this.getDetail(this.id);
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						});
					}
				})
			},
			zan(id) {
				articleLike({
					id: id
				}).then((res) => {
					if (res.code == 200001) {
						uni.showToast({
							title: '点赞成功',
							icon: 'none'
						});
						this.getDetail(this.id);
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						});
					}
				})
			},
			likeComment(id) {
				like_comment({
					id
				}).then(res => {
					uni.showToast({
						title: '点赞成功',
						icon: 'none'
					});
					this.getDetail(this.id);
				})
			},
			getDetail(id) {
				let params = {
					id: id
				}
				articleDetail(params).then(res => {
					if (res.code == 200001) {
						this.articleDetails = res.data;
					}
				}).catch(err => {
					console.log(err)
				})
			}
		}
	}
</script>

<style>
	.page_view {
		padding: 0 30rpx;
		box-sizing: border-box;
		padding-bottom: 100rpx;
	}

	.xiepinglun_inputs {
		float: left;
		width: 556rpx;
		height: 68rpx;
	}

	.xiepinglun_inputs input {
		width: 526rpx;
		height: 68rpx;
		background: #F4F4F4;
		border-radius: 34rpx;
		padding-left: 30rpx;
	}

	.title {
		padding-top: 30rpx;
		color: #222;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 38rpx;
		font-weight: 400;
	}

	.fengmian {
		width: 100%;
		height: 492rpx;
		background: #ccc;
		margin-top: 40rpx;
	}

	.desc {
		color: #444;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 30rpx;
		font-weight: 400;
		margin-top: 40rpx;
	}

	.time {
		color: #999;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 24rpx;
		font-weight: 400;
		margin-top: 40rpx;
	}

	.shera {
		margin-top: 40rpx;
	}

	.shera_item {
		margin-right: 80rpx;
	}

	.shera_item_img {
		width: 40rpx;
		height: 40rpx;
	}

	.shera_item_text {
		color: #444;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 24rpx;
		font-weight: 400;
		margin-left: 8rpx;
	}

	.pl_view {
		margin-top: 60rpx;
	}

	.pl_title {
		color: #222;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 30rpx;
		font-weight: 400;
	}

	.pl_list {
		width: 100%;
		margin-top: 30rpx;
	}

	.pl_list_item {
		display: flex;
		justify-content: space-between;
		margin-top: 30rpx;
	}

	.pl_list_itemer {
		padding-left: 60rpx;
		display: flex;
		justify-content: space-between;
		margin-top: 30rpx;
	}

	.pl_list_itemer .pl_list_item_img {
		margin-right: 10rpx;
	}

	.pl_list_item_img {
		width: 60rpx;
		height: 60rpx;
		border-radius: 60rpx;
		border-radius: 50%;
		background: #ccc;
	}

	.pl_list_item_right {
		width: 610rpx;
	}

	.pl_name {
		color: #222;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 28rpx;
		font-weight: 400;
	}

	.pl_content {
		color: #666;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 28rpx;
		font-weight: 400;
		margin-top: 4rpx;
	}

	.zan {
		color: #999;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 24rpx;
		font-weight: 400;
		margin-top: 20rpx;
	}

	.zan_icon {
		width: 30rpx;
		height: 30rpx;
	}

	.xiepinglun {
		position: fixed;
		bottom: 0;
		width: 689rpx;
		height: 88rpx;
		padding-top: 10rpx;
		padding-bottom: 40rpx;
		background: #fff;
		/* margin-top: 40rpx; */
		overflow: hidden;
	}

	.xiepinglun_input {
		width: 556rpx;
		height: 68rpx;
		border-radius: 34rpx;
		background: #F4F4F4;
		color: #333;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 28rpx;
		font-weight: 400;
		padding-left: 30rpx;
		float: left;
	}

	.xiepinglun_icon {
		float: right;
	}

	.xiepinglun_icon_img {
		width: 40rpx;
		height: 40rpx;
	}

	.xiepinglun_icon_num {
		color: #666;
		text-align: center;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 24rpx;
		font-weight: 400;
	}
</style>